<template>
  <div id="map-container" class="map"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { load as loadAmap } from '@amap/amap-jsapi-loader';
import mapWebp from '../assets/map.png';

const apiKey = 'c37ef6e4d6a32e671aa743bf972294ed'; // 替换为你的API Key
const mapOptions = {
  zoom: 11, // 地图缩放级别
  center: [113.2644, 23.1291], // 初始中心点坐标
};

onMounted(async () => {
  try {
    const AMap = await loadAmap({
      key: apiKey,
      version: '2.0',
      plugins: ['AMap.ToolBar', 'AMap.Scale'], // 根据需要加载插件
    });

    const map = new AMap.Map('map-container', mapOptions);



    // 添加地图控件
    map.addControl(new AMap.ToolBar());
    map.addControl(new AMap.Scale());

    // 调用后端API获取站点数据并添加标记
    fetchStations().then(stations => addMarkers(map, stations));
  } catch (error) {
    console.error('Failed to initialize map:', error);
  }
});

async function fetchStations() {
  // 这里应该调用你的Spring Boot API来获取站点数据
  // 示例中直接返回假数据
  return [
    { name: '天河区充电站', location: [113.357667,23.151366] },
    { name: '番禺区特斯拉专用站', location: [113.368130,23.016571] },
      { name: '南沙区新港充电站', location: [113.670650,22.649766] },
      { name: '白云区商用充电站', location: [113.260030,23.194605] },
      { name: '越秀区社区充电站', location: [113.248610,23.150739] },
  ];
}

function addMarkers(map, stations) {
  // 使用AMap.Icon定义红色大图标
  const redLargeMarkerIcon = new AMap.Icon({
    image: mapWebp, // 高德提供的红色图标
    size: new AMap.Size(180, 180), // 图标大小
    imageSize: new AMap.Size(180, 180), // 图片实际大小
  });

  stations.forEach(station => {
    const marker = new AMap.Marker({
      position: new AMap.LngLat(...station.location),
      title: station.name,
      icon: redLargeMarkerIcon, // 使用定义好的红色大图标
      offset: new AMap.Pixel(-90, -90), // 根据新的图标大小调整偏移量
    });
    map.add(marker);
  });

  console.log(`${stations.length} markers added.`);
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 500px;
}
</style>